<script setup lang="ts">
import { computed } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import { useGlobalSettingStore } from '@/stores/global-setting'
import { isWeixinBrowser } from '@/utils'
// const $toast: any = inject('$toast', () => {})
const router = useRouter()
const route = useRoute()

// 全局设置
const globalSettingStore = useGlobalSettingStore()
const { state, themeVars } = globalSettingStore
console.log(import.meta.env, state, themeVars)

const title = computed(() => route.meta.title as string)
const topNavMode = computed(() => route.meta.topNavMode as string)
// watch(globalSettingStore.state, (val) => console.log(val), { deep: true })
// watch(topNavMode, (val, oldval) => {
//   if (val !== oldval) {
//     nextTick(() => {})
//   }
// })

const onClickLeft = () => {
  if (topNavMode.value === 'mainPage') {
    return
  }
  router.back()
}

</script>

<template>
  <van-config-provider :theme="state.theme" :theme-vars="themeVars">
    <!-- 开启顶部安全区适配 safe-area-inset-top -->
    <!-- 全局顶部栏 -->
    <van-nav-bar
      v-if="!isWeixinBrowser()"
      v-show="topNavMode !== 'none'"
      :title="title || '标题'"
      :left-text="topNavMode !== 'mainPage' ? '返回' : ''"
      :left-arrow="topNavMode !== 'mainPage'"
      @click-left="onClickLeft"
      fixed
      placeholder
    />
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
    <!-- 开启底部安全区适配 -->
    <!-- <van-number-keyboard safe-area-inset-bottom /> -->
  </van-config-provider>
</template>

<style lang="scss" scoped>
// 高度适配
.van-nav-bar__placeholder {
  height: 92px;
}
</style>
